<!--  -->
<template>
  <div class="app-wrap">
    <el-carousel :autoplay="false" arrow="never" trigger="touch"  :loop="false">
      <el-carousel-item v-for="item in 2" :key="item">
        <div class="slider-wrap">
          <appItem
            v-for="(appItem, index) in apps"
            :item="appItem"
            :key="index"
          ></appItem>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import imgUrl from '../../../../../static/img/profile.jpg';
import appItem from './components/appItem.vue';

export default {
  name: 'index',
  props: {},
  data() {
    return {
      apps: [
        {
          img: imgUrl,
          name: '谷歌',
        },
        {
          img: imgUrl,
          name: '快手',
        },
        {
          img: imgUrl,
          name: '抖音',
        },
        {
          img: imgUrl,
          name: '有道',
        },
        {
          img: imgUrl,
          name: '酷狗',
        },
        {
          img: imgUrl,
          name: '网易云音乐',
        },
        {
          img: imgUrl,
          name: '王者荣耀',
        },
        {
          img: imgUrl,
          name: '绝地求生',
        },
        {
          img: imgUrl,
          name: '有道云笔记',
        },
        {
          img: imgUrl,
          name: '支付宝',
        },
        {
          img: imgUrl,
          name: '微信',
        },
        {
          img: imgUrl,
          name: '今日头条',
        },
        {
          img: imgUrl,
          name: '去哪网',
        },
        {
          img: imgUrl,
          name: '高途课堂',
        },
        {
          img: imgUrl,
          name: '学而思',
        },
        {
          img: imgUrl,
          name: '猿辅导',
        },
        {
          img: imgUrl,
          name: '飞猪旅行',
        },
        {
          img: imgUrl,
          name: '京东',
        },
        {
          img: imgUrl,
          name: '京东金融',
        },
        {
          img: imgUrl,
          name: '拼多多',
        },
      ],
    };
  },
  components: {
    appItem,
  },
};
</script>

<style lang='scss'>
.slider-wrap {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  align-content: center;
  padding-top: 20px;
  padding-bottom: 30px;
  background: #ffffff;
  box-shadow: 4px 4px 16px 0 rgba(0, 52, 125, 0.1);
  border-radius: 16px;
  border-radius: 16px;
}
.app-wrap {
  flex: 1;
  .el-carousel--horizontal {
    height: 100%;
    .el-carousel__container {
      height: 100%;
    }
  }
  .el-carousel__item {
    height: 100%;
  }
  .is-active{
    .el-carousel__button{
      width: 16px;
      background-color: #7CB3FF ;
    }
  }
  .el-carousel__button{
    width: 10px;
    height: 5px;
    border-radius: 3px;
    background-color: #D6D6D6;
  }
}
</style>
